<template>
  <treeTable :columns="columns.treeColumns" :dataSource="dataList" :rowKey="rowKey"
    :childrenColumnName="childrenColumnName" @expanded="expanded" :loading="loading" ref="treeTables">
    <template #headerCell="{ column, record }">
      <a-checkbox>{{ column.dataIndex }} </a-checkbox>
    </template>
  </treeTable>

  <pagination @selectAll="selectAll" :dataSource="dataList" @changePage="changePage" :total="data.length"
    :selfChecked="selfChecked" :scroll="scroll" v-if="isShowPagination"></pagination>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted, reactive, nextTick } from "vue";
import columns from "@/components/table/tableConfig/columnsName";
import pagination from "@/components/pagination/index.vue";
import { getTableScroll } from "@/components/table/tableConfig/table";
import treeTable from "@/components/table/baseTable.vue";
//data
const isShowPagination = false;
const rowKey: string = "key";
const childrenColumnName: string = "children";
const selectedRowKeys = ref([]);
const treeTables = ref("treeTables");
const loading = ref<boolean>(false);
console.log(treeTable, 8888);
interface scrollType {
  y: string | number;
  isFixed: boolean;
}
let scroll: scrollType = reactive({ y: "", isFixed: false });
let expandedRowKeys = ref<string[]>([]);

interface DataItem {
  id: string;
  name: string;
  age: number;
  address: string;
  children?: DataItem[];
  [propName: string]: any;
}

const data = ref<any[]>([
  {
    id: "1",
    name: "John Brown sr.",
    age: 60,
    address: "New York No. 1 Lake Park",
    children: [
      {
        key: "1",
        name: "John Brown sr.",
        age: 60,
        address: "New York No. 1 Lake Park",
        children: [],
      },
      {
        key: "2",
        name: "Joe Black",
        age: 32,
        address: "Sidney No. 1 Lake Park",
        leaves: 0,
      },
    ],
  },
  {
    id: "2",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    leaves: 0,
  },
]);

const dataList = ref<any[]>(data.value.slice(0, 10));

const rowSelection = computed(() => {
  return {
    selectedRowKeys,
    onChange: onSelectChange,
    onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => { },
    onSelectAll: (
      selected: boolean,
      selectedRows: DataItem[],
      changeRows: DataItem[]
    ) => { },
  };
});
// methods
const onSelectChange = (changableRowKeys: never[]) => {
  console.log("selectedRowKeys changed: ", changableRowKeys);
  selectedRowKeys.value = changableRowKeys;
};
const expanded = (expanded: boolean, record: any) => {
  console.log(expanded, record, 999);
  if (record.children && !record.children.length) {
    loading.value = true;
    setTimeout(() => {
      let tableRow: any = {
        id: `${record.id}-1`,
        name: "Joe Black",
        age: 32,
        address: "Sidney No. 1 Lake Park",
        children: [],
      };
      record.children.push(tableRow);
      loading.value = false;
    }, 100);
  }
};
//onmounted
onMounted(() => {
  scroll.y = getTableScroll(74, "").y;
  scroll.isFixed = getTableScroll(74, "").isFixed;
});

// const getExpandedRowKeys = (list) => {
//   list.forEach((item) => {
//     if (item.children && item.children.length) {
//       // 将所有children的父节点取出
//       expandedRowKeys.value.push(item.key);
//       getExpandedRowKeys(item.children);
//     }
//   });
// };

//自定义全选
const selectAll = (changableRowKeys: any) => {
  onSelectChange(changableRowKeys);
};
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  let { pageCurrent, pageSize } = data;

  dataList.value = dataList.value.filter((item, index) => {
    return index >= (pageCurrent - 1) * pageSize && index <= pageCurrent * pageSize - 1;
  });
  nextTick(() => {
    scroll.y = getTableScroll(74, "").y;
    scroll.isFixed = getTableScroll(74, "").isFixed;
  });
};

//computed

const selfChecked = computed(() => {
  let checkKeys: any[] = [];
  const getList = (list: any[]) => {
    list.map((item) => {
      checkKeys.push(item.key);
      if (item.children) {
        getList(item.children);
      }
    });
    return checkKeys;
  };
  getList(dataList.value);
  return selectedRowKeys.value.length === checkKeys.length;
});
</script>
